export const useDrag = ({ id }) => {
  // dialog头部节点
  const dialogHeaderEl: HTMLDivElement | null | undefined = document
    .querySelector(`#${id}`)
    ?.querySelector('.n-dialog__title')
  // dialog节点
  const dragDom: HTMLDivElement | null = document.querySelector(`#${id}`)
  // 重置位置
  const resetDrag = (isFullscreen: boolean) => {
    if (dragDom && dialogHeaderEl) {
      dragDom.style.cssText += `;left:0px;top:0px;`
      // 全屏取消鼠标样式
      if (isFullscreen) {
        dialogHeaderEl.style.cssText += ';cursor:default;'
        // 清除鼠标监听
        clearMouseEvent()
      } else {
        // 重新添加鼠标监听
        useDrag({ id })
      }
    }
  }
  // 清除弹窗鼠标拖拽监听
  const clearMouseEvent = () => {
    // dialog头部节点
    const dialogHeaderEl: HTMLDivElement | null =
      document.querySelector('.n-dialog__title')
    // dialog节点
    const dragDom: HTMLDivElement | null = document.querySelector('.n-dialog')
    // 清除监听器
    if (dialogHeaderEl && dragDom) {
      dragDom.ondragstart = null
      dialogHeaderEl.onmousedown = null
    }
  }

  if (dragDom && dialogHeaderEl) {
    dialogHeaderEl.style.cssText += ';cursor:move;'
    dragDom.style.cssText += ';top:0px;'

    // 获取属性
    const getStyle = (function () {
      // ie dom元素.currentStyle
      if (window.document.currentStyle) {
        return (dom, attr) => dom.currentStyle[attr]
      } else {
        // 火狐谷歌 window.getComputedStyle(dom元素, null);
        return (dom, attr) => getComputedStyle(dom, null)[attr]
      }
    })()

    // 冒泡阻止header文本拖拽导致onmouseup事件没有被监听到 造成松开鼠标，弹窗也随着鼠标移动
    dragDom.ondragstart = () => {
      document.onmousemove = null
      document.onmouseup = null
    }
    // 添加鼠标按下监听
    dialogHeaderEl.onmousedown = (e) => {
      clearEvent()
      // 鼠标按下，计算当前鼠标位置距离可视区 左侧和顶部的距离
      const disX = e.clientX
      const disY = e.clientY
      // 弹窗宽高
      const dragDomWidth = dragDom.offsetWidth
      const dragDomheight = dragDom.offsetHeight
      // 屏幕宽高
      const screenWidth = document.body.clientWidth
      const screenHeight = document.body.clientHeight
      // 横向移动范围
      const minDragDomLeft = dragDom.offsetLeft
      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
      // 竖向移动范围
      const minDragDomTop = dragDom.offsetTop
      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight

      let styL: string | number = getStyle(dragDom, 'left') as string
      let styT: string | number = getStyle(dragDom, 'top') as string
      // 获取到的值带px 正则匹配替换
      if (styL.includes('%')) {
        styL = (document.body.clientWidth *
          (+styL.replace(/%/g, '') / 100)) as number
        styT = (document.body.clientHeight *
          (+styT.replace(/%/g, '') / 100)) as number
      } else {
        styL = +styL.replace(/\px/g, '') as number
        styT = +styT.replace(/\px/g, '') as number
      }
      // 添加鼠标移动监听
      document.onmousemove = function (e) {
        // 计算移动的距离
        let left: number = e.clientX - disX
        let top: number = e.clientY - disY

        // 边界处理
        // 左侧移动 left为负数 和最小值比
        if (-left > minDragDomLeft) {
          left = -minDragDomLeft
          // 右侧移动 left为正数 和最大值比
        } else if (left > maxDragDomLeft) {
          left = maxDragDomLeft
        }

        if (-top > minDragDomTop) {
          top = -minDragDomTop
        } else if (top > maxDragDomTop) {
          top = maxDragDomTop
        }

        // 移动当前元素
        dragDom.style.cssText += `;left:${left + (styL as number)}px;top:${
          top + (styT as number)
        }px;`
        // console.log('left', left, styL, styT, top)
      }
    }
    /**
     * @description: 添加鼠标松开和移出事件 移除鼠标移动事件
     * @return {*}
     */
    const clearEvent = () => {
      document.onmouseup = clear
      document.onmouseleave = clear
      function clear() {
        document.onmousemove = null
        document.onmouseup = null
        document.onmouseleave = null
      }
    }
  }
  return {
    resetDrag,
    clearMouseEvent
  }
}
